<template>
	<view class="padding">
		<!-- 日历内容 -->
		<view class="margin-bottom">
			<uni-calendar :insert="true" :showMonth="false" :selected="tripInfoList" :start-date="startDate"
				@change="getDate"></uni-calendar>
		</view>
		<!-- <view class="margin-top">
			<button class="cu-btn lg bg-blue " @click="jump" >测试</button>
		</view> -->
		<!-- 行程信息 -->
		<view v-if="triverList!=null" class="tripModel" >
			<view class="height-bth flex-row solid-bottom">
				<image style="width: 10rpx; height: 40rpx;" src="../../static/icon/itltle_icon.jpg" />
				<view class="margin-left-sm text-bold text-df">当日行程</view>
			</view>
			<view class="flex-row height-bth solid-bottom" v-for="(item,index) in triverList" :key="index">
				<view style="width: 150rpx;">{{item.driverTripTime}}</view>
				<view class="flex-sub flex-allCenter">{{item.setoutPlace}}→{{item.destinationPlace}}</view>
			</view>
		</view>
		<!-- 底部tabBar -->
		<u-tabbar :value="tabBarvalue" @change="change" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home"></u-tabbar-item>
			<u-tabbar-item text="行程" icon="car"></u-tabbar-item>
			<u-tabbar-item text="排班" icon="calendar"></u-tabbar-item>
			<u-tabbar-item text="消息" icon="chat"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		changeMenu
	} from '../../api/constant';
	import {
		getDriverArrange
	} from '../../api/tripApi';
	export default {
		data() {
			return {
				tabBarvalue: 2,
				startDate: '2024-10-15',
				tripInfoList: [],
				triverList: []

			}
		},
		onLoad() {
			this.getScheduIng();
			this.triverList = null;
		},
		methods: {
			/**tabBar切换*/
			change(param) {
				changeMenu(param);
			},
			/**日期选择*/
			getScheduIng() {
				getDriverArrange().then(res => {
					this.tripInfoList = res.data.data;
				})
			},
			/**日期选择*/
			getDate(e) {
				if(e.extraInfo.data == null){
					this.triverList = null;
				}else{
					this.triverList = e.extraInfo.data.tripInfoVoList;
				}
				
			},
			jump(){
				this.$tab.navigateTo('/pages/scheduling/ceshi')
			}
		}
	}
</script>

<style>
	::v-deep .uni-calendar__content {
		border-radius: 12rpx;
	}

	.tripModel {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 15rpx 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
	}
</style>